import React, { Component } from 'react';
import { TouchableOpacity, View, StyleSheet } from 'react-native';
import { ButtonGroup, CheckBox, Text, Button } from 'react-native-elements';
import { primaryColor, toast, checkoutNextPage } from './utils';
import { setCheckoutSelect, getCheckoutSelect } from './clientStorage';
import OrderDatePanel from './components/OrderDatePanel';
import NavNext from './widgets/NavNext';
import moment from 'moment';

const isPickup = (navigation) => {
  const { stepper, stepIndex } = navigation.state.params;
  return stepper[stepIndex]==='CheckoutPickupDate';
}

class CheckoutDatePage extends Component {
  static navigationOptions = ({navigation, screenProps}) => {
    return {
      headerRight: (
        <NavNext chinese={screenProps.chinese} onPress={() => {
            const { pickupDate, deliveryDate, business } = navigation.state.params;

            if (isPickup(navigation)&&(!pickupDate||(!business&&moment(pickupDate).hour()===0))) {
              return toast('Please select a pickup time slot');
            }
            if (!isPickup(navigation)&&(!deliveryDate||(!business&&moment(deliveryDate).hour()===0))) {
              return toast('Please select a delivery time slot');
            }

            let args = {};
            if (isPickup(navigation)&&business) {
              args.pickupDate = moment(pickupDate).hour(16).toDate();
            } else if (!isPickup(navigation)&&business) {
              args.deliveryDate = moment(deliveryDate).hour(16).toDate();
            }

            checkoutNextPage(navigation, args);
          }}/>
      ),
    };
  };
  state = {
    now: new Date().toString()
  };
  onSelectDate = (selectDate) => {
    const pickup = isPickup(this.props.navigation);
    this.props.navigation.setParams({[pickup?'pickupDate':'deliveryDate']: selectDate});
  }
  onToggleExpress = () => {
    this.props.navigation.setParams({express: !this.props.navigation.state.params.express});
  }
  onToggleFlixable = () => {
    if (isPickup(this.props.navigation)) {
      this.props.navigation.setParams({pickupFlexible: !this.props.navigation.state.params.pickupFlexible});
    } else {
      this.props.navigation.setParams({dropOffFlexible: !this.props.navigation.state.params.dropOffFlexible});
    }
  }
  render() {
    const { addressId, type, deliveryAddressId, items, pickupDate, deliveryDate,
      express, business, pickupFlexible, dropOffFlexible } = this.props.navigation.state.params;
    const pickup = isPickup(this.props.navigation);

    return (
      <OrderDatePanel isPickup={pickup} addressId={(!pickup&&deliveryAddressId)||addressId} items={items}
        date={pickup?this.state.now:pickupDate} express={express} selectDate={pickup?pickupDate:deliveryDate}
        chinese={this.props.screenProps.chinese} onSelectDate={this.onSelectDate}
        type={type} business={business} onToggleExpress={this.onToggleExpress}
        isFlexible={pickup?pickupFlexible:dropOffFlexible} onToggleFlixable={this.onToggleFlixable}
        navigation={this.props.navigation}/>
    );
  }
}

export default CheckoutDatePage;
